<template>
    <el-row :gutter="10">
      <el-col id="post"  :sm="2" :md="2" :lg="2" :xl="2">
      </el-col>
      <el-col id="post" :xs="24" :sm="13" :md="14" :lg="15" :xl="15">
        <router-view />
      </el-col>
      <el-col v-if="windowWidth > 768" class="right-bar" id="blog"  :sm="9" :md="8" :lg="7" :xl="7" >
        <el-affix  offset="105" target="#display" >
            <el-row>
              <BloggerInfo/>
            </el-row>
            <el-row>
              <BlogInfo/>
            </el-row>
        </el-affix>
      </el-col>
    </el-row>
</template>

<script setup lang="ts">
import 'element-plus/theme-chalk/display.css'
import BlogInfo from '@/components/home/BlogInfo.vue';
import BloggerInfo from '@/components/home/BloggerInfo.vue';
import {onMounted, ref} from 'vue'
import {homePageData} from '@/store/customer/inedx'

const windowWidth = ref(999)


onMounted(() => {
  if(homePageData.homePostList.length<=0){
     homePageData.getList(1,10);
  }
  window.addEventListener('resize', getWindowResize)
})

const getWindowResize = function () {
  windowWidth.value = window.innerWidth
}
</script>

